/*
 * @Author: shiguo
 * @Date: 2022-04-20 14:56:47
 * @LastEditors: shiguo
 * @LastEditTime: 2022-05-09 14:35:04
 * @FilePath: /@aks/easyui/lib/WithLoadingContainer/WithLoadingContainer.tsx
 */
import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity } from 'react-native'
const loading = require('./loading.gif')
const loading3 = require('./loading3.gif')
import { WithLoadingContainerProps, Status } from '.'



export default (props: Partial<WithLoadingContainerProps>) => {
    const {
        status = Status.NONE,
        renderFailComponent,
        renderEmptyComponent,
        renderNomoreComponent,
        reload,
        failText = '网络请求失败，点击重新加载~',
        emptyText = '暂无数据',
        nomoreText = '没有更多数据了～',
    } = props



    return (
        <View style={props.style}>
            <>
                {(() => {

                    switch (status) {
                        case Status.NONE: return undefined;
                        case Status.SUCCESS: return props.children;
                        case Status.LOADING: return <Loading />;
                        case Status.FAIL:
                            if (renderFailComponent) return renderFailComponent();
                            return (
                                <TouchableOpacity disabled={!reload} onPress={reload} style={styles.container}>
                                    <Text style={styles.text}>{failText}</Text>
                                </TouchableOpacity>
                            );
                        case Status.EMPTY:
                            if (renderEmptyComponent) return renderEmptyComponent();
                            return (
                                <TouchableOpacity disabled={!reload} onPress={reload} style={styles.container}>
                                    <Text style={styles.text}>{emptyText}</Text>
                                </TouchableOpacity>
                            );
                        case Status.NOMORE:
                            return (
                                <>
                                    {props.children}
                                    {renderNomoreComponent ? renderNomoreComponent() : <Text style={styles.text}>{nomoreText}</Text>}
                                </>
                            );
                        default: return <Text style={[styles.text, { lineHeight: 44, }]}>(^_^)∠※ 送你一束小花</Text>;

                    }
                })()}
            </>
        </View>
    )
}



const Loading = () => {
    return (
        <View style={styles.container}>
            <Image source={loading3} style={{ width: 20, height: 20 }} resizeMode='contain' />
        </View>
    )
}


const styles = StyleSheet.create({
    text: {
        color: '#999999',
        fontSize: 14,
        // textAlign: 'center',
    },
    container: {
        display: 'flex',
        minHeight: 44,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal:15
    }
})
